<template>
  <div class="h-full w-full">
    <div class="h-1/10 w-full flex items-center justify-between">
      <div>
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="size"
          :page-sizes="[12, 20, 30, 40]"
          size="default"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <div>
        <el-button type="primary" color="#b4b4e5" size="large" @click="refresh">
          <img src="/src/assets/svg/007.svg" class="w-8 mr-2" />
          刷新
        </el-button>
              </div>
    </div>
    <div class="w-full h-9/10 overflow-auto">
      <el-table
        v-loading="loading"
        element-loading-text="加载中..."
        class="rounded-2xl"
        :data="dailyTrainTicketList"
        style="width: 100%"
        border
        stripe
        size="large"
      >
          <el-table-column prop="id" label="id" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="date" label="日期" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="trainCode" label="车次编号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="start" label="出发站" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="startPinyin" label="出发站拼音" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="startTime" label="出发时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="startIndex" label="出发站序" >
          </el-table-column>
          <el-table-column prop="end" label="到达站" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="endPinyin" label="到达站拼音" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="endTime" label="到站时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="endIndex" label="到站站序" >
          </el-table-column>
          <el-table-column prop="ydz" label="一等座余票" >
          </el-table-column>
          <el-table-column prop="ydzPrice" label="一等座票价" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="edz" label="二等座余票" >
          </el-table-column>
          <el-table-column prop="edzPrice" label="二等座票价" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="rw" label="软卧余票" >
          </el-table-column>
          <el-table-column prop="rwPrice" label="软卧票价" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="yw" label="硬卧余票" >
          </el-table-column>
          <el-table-column prop="ywPrice" label="硬卧票价" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="createTime" label="新增时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip>
          </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

const page = ref(1)
const size = ref(12)
const total = ref(0)

const loading = ref(false) // 表格加载
const dailyTrainTicketList = ref()

interface DailyTrainTicketForm {
  id: string
  date: string
  trainCode: string
  start: string
  startPinyin: string
  startTime: string
  startIndex: number
  end: string
  endPinyin: string
  endTime: string
  endIndex: number
  ydz: number
  ydzPrice: string
  edz: number
  edzPrice: string
  rw: number
  rwPrice: string
  yw: number
  ywPrice: string
  createTime: string
  updateTime: string
}
const dailyTrainTicketForm = ref<DailyTrainTicketForm>({
  id: '',
  date: '',
  trainCode: '',
  start: '',
  startPinyin: '',
  startTime: '',
  startIndex: 0,
  end: '',
  endPinyin: '',
  endTime: '',
  endIndex: 0,
  ydz: 0,
  ydzPrice: '',
  edz: 0,
  edzPrice: '',
  rw: 0,
  rwPrice: '',
  yw: 0,
  ywPrice: '',
  createTime: '',
  updateTime: '',
})
// 刷新DailyTrainTicket表格
const refresh = async () => {
  try {
    await queryDailyTrainTicketList()
    ElMessage.success('刷新成功')
  } catch (e) {}
}
// 查询DailyTrainTicket列表
const queryDailyTrainTicketList = () => {
  loading.value = true
  return axios
    .get('/business/admin/daily-train-ticket/query-list', {
      params: {
        page: page.value,
        size: size.value,
      },
    })
    .then((res) => {
      loading.value = false
      dailyTrainTicketList.value = res.data.content.list
      total.value = res.data.content.total
    })
    .catch((error) => {
      loading.value = false
      throw error
    })
}
// 页面加载时查询DailyTrainTicket列表
onMounted(async () => {
  await queryDailyTrainTicketList()
})
// 分页器
const handleSizeChange = (val: number) => {
  size.value = val
  queryDailyTrainTicketList()
}
// 分页器
const handleCurrentChange = (val: number) => {
  page.value = val
  queryDailyTrainTicketList()
}
</script>

<style lang="scss" scoped></style>